{extend name="public/base"}
{block name="title"}{/block}
{block name="css"}
<style>
    .layui-container {display: flex;align-items: flex-end;padding-bottom:10px;box-sizing:border-box;height: 100%;}
</style>
{/block}
{block name="main"}
{:widget('Pub/header')}
<div class="top-box-sample">
    <div class="layui-container">
        <div class="tip-box-sample">
            <p class="cn">电容定制</p>
            <p class="en">Capacitor customization</p>
        </div>
    </div>
</div>
<div class="main">
    <div class="sample-main">
        <div class="sample-title wow slideInRight">
            <h3>定制电容信息采集表</h3>
            <div class="en">CUSTOM IZED</div>
        </div>
        <form class="layui-form" action="">
            <div class="layui-form-item sample-form-title">
                <label class="layui-form-label sample-v-label">
                    <p>公司名称<text class="require"> *</text> </p>
                    <p class="en">corporate name</p>
                </label>
                <input class="layui-input border-none" type="text" name="company" required lay-verify="required"
                       placeholder="请输入公司名称"
                       autocomplete="off">
            </div>
            <div class="layui-row form-content-box">
                <div class="sample-form-border layui-col-xs12 layui-col-sm12 layui-col-md4">
                    <div class="sample-form-nav">
                        <p>个 人 信 息</p>
                        <p class="en">personal information</p>
                    </div>
                    <div class="layui-form-item mt-20">
                        <label class="layui-form-label sample-h-label">
                            <p>姓名  <text class="en">Name</text></p>
                        </label>
                        <input class="layui-input form-border-bottom" type="text" name="name" autocomplete="off">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label sample-h-label">
                            <p>电话  <text class="require">*</text><text class="en">Tel</text></p>
                        </label>
                        <input class="layui-input form-border-bottom" type="text" name="tel" required lay-verify="required"
                               autocomplete="off">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label sample-h-label">
                            <p>邮箱  <text class="require">*</text><text class="en">Email</text></p>
                        </label>
                        <input class="layui-input form-border-bottom" type="text" name="email" required lay-verify="required"
                               autocomplete="off">
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md8">
                    <div class="form-right sample-form-border">
                        <div class="sample-form-nav">
                            <p>电 容 信 息</p>
                            <p class="en">personal information</p>
                        </div>
                        <div class="layui-row mt-20">
                            <div class="son-left layui-col-xs12 layui-col-sm12 layui-col-md6">
                                <div class="layui-form-item">
                                    <label class="layui-form-label sample-h-label">
                                        <p>电容应用终端  <text class="require">*</text><text class="en">Application terminal</text></p>
                                    </label>
                                    <input class="layui-input form-border-bottom" type="text" name="terminal" required lay-verify="required" autocomplete="off">
                                </div>
                                <div class="form-son-line">
                                    <div class="layui-form-item layui-col-xs12 layui-col-sm12 layui-col-md5">
                                        <label class="layui-form-label sample-h-label">
                                            <p>电压  <text class="require">*</text><text class="en">Voltage</text></p>
                                        </label>
                                        <input class="layui-input form-border-bottom" type="text" name="voltage" required lay-verify="required" autocomplete="off">
                                    </div>
                                    <div class="layui-form-item layui-col-xs12 layui-col-sm12 layui-col-md5">
                                        <label class="layui-form-label sample-h-label">
                                            <p>容量  <text class="require">*</text><text class="en">Capacity</text></p>
                                        </label>
                                        <input class="layui-input form-border-bottom" type="text" name="capacity" required lay-verify="required" autocomplete="off">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label sample-h-label">
                                        <p>尺寸  <text class="require">*</text>（允许直径和高度）<text class="en">Size</text></p>
                                    </label>
                                    <input class="layui-input form-border-bottom" type="text" name="size" required lay-verify="required" autocomplete="off">
                                </div>
                            </div>
                            <div class="son-right layui-col-xs12 layui-col-sm12 layui-col-md6">
                                <div class="layui-form-item sample-select">
                                    <label class="layui-form-label sample-h-label">
                                        <p>电容类别  <text class="en">Category</text></p>
                                    </label>
                                    <div class="layui-input-block">
                                        <select name="categoryType">
                                            <option value="" selected=""></option>
                                            <option value="0">类型一</option>
                                            <option value="1">类型二</option>
                                            <option value="2">类型三</option>
                                            <option value="3">类型四</option>
                                            <option value="4">类型五</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-son-line">
                                    <div class="layui-form-item layui-col-xs12 layui-col-sm12 layui-col-md7">
                                        <label class="layui-form-label sample-h-label label-right-special">
                                            <p>耐温要求  <text class="en">Temperature</text></p>
                                        </label>
                                        <input class="layui-input form-border-bottom" type="text" name="temperature" autocomplete="off">
                                    </div>
                                    <div class="layui-form-item layui-col-xs12 layui-col-sm12 layui-col-md4">
                                        <label class="layui-form-label sample-h-label label-right-special label-left-special">
                                            <p>寿命要求  <text class="en">Life</text></p>
                                        </label>
                                        <input class="layui-input form-border-bottom" type="text" name="life" autocomplete="off">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label sample-h-label">
                                        <p>其他  <text class="en">Other</text></p>
                                    </label>
                                    <input class="layui-input form-border-bottom" type="text" name="other" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-submit">
                <div class="form-submit-tip">
                    <p class="cn">主：*为 必 须 填</p>
                    <p class="en">Main: * is required</p>
                </div>
                <button class="layui-btn" lay-submit lay-filter="sampleForm">提交</button>
            </div>
        </form>
    </div>
</div>
{:widget('Pub/footer')}
{/block}
{block name="js"}
<script>
    new WOW().init();
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(sampleForm)', function (data) {
            console.log(JSON.stringify(data.field))
            return false;
        });
    });
</script>
{/block}